import {
    urlToImageElement,
    getImageData,
    shortcutKeys
} from '../utils';

export default {
    init() {
        CanvasRenderingContext2D.prototype.wrapText = function (text, x, y, lineHeight) {
            if (typeof text != 'string' || typeof x != 'number' || typeof y != 'number') {
                return;
            }
            var context = this, canvas = context.canvas;
            if (typeof lineHeight == 'undefined') {
                lineHeight = (canvas && parseInt(window.getComputedStyle(canvas).lineHeight)) || parseInt(window.getComputedStyle(document.body).lineHeight);
            }
            var arrText = text.split(''), line = '';
            for (var n = 0; n < arrText.length; n++) {
                var testLine = line + arrText[n];
                if (arrText[n] === '\n') {
                    context.fillText(line.replace('\n', ''), x, y);
                    line = arrText[n];
                    y += lineHeight;
                } else {
                    line = testLine;
                }
            }
            context.fillText(line.replace('\n', ''), x, y);
        };

        this.loading(true)
        this.eventDestroy()

        const getItem = (key, fn) => {
            let item = null, index = -1;
            this.controlList.forEach((tem, i) => {
                if(tem.type === key){
                    item = tem
                    index = i
                }
            })
            if(item && index > -1){
                fn(item, index)
            }
        }

        if(this.background && /(.png|.jpg|.webp|.jpeg|.PNG|.JPG|.WEBP|.JPEG|http|https)/g.test(this.background)){
            urlToImageElement(this.background, {pixel: this.options.pixel}).then((image) => {
                this.image = image;
                this.initCanvas(image);
                this.initEvent();
                this.loading(false);
                this.$emit('start', `分辨率: ${image.width}x${image.height}`)
                this.imgDataOld = getImageData(this.canvas);
                if (this.$refs.canvasBox) {
                    this.canvasBox = this.$refs.canvasBox;
                    this.canvasBox.style.width = this.canvas.width + 'px'
                    this.canvasBox.style.height = this.canvas.height + 'px';
                }
                if (this.$refs.vdView) {
                    this.vdView = this.$refs.vdView
                }

              /*  //执行 方框
                shortcutKeys('Ctrl + Q', () => {
                    getItem('Square', this.onSelectControl)
                })
                //执行 线
                shortcutKeys('Ctrl + L', () => {
                    console.log('111111111111- 线')
                    getItem('Line', this.onSelectControl)
                })

                //执行 圆
                shortcutKeys('Ctrl + C', () => {
                    console.log('111111111111- 圆')
                    getItem('Circle', this.onSelectControl)
                })

                shortcutKeys('Ctrl + Z', () => {
                    console.log('Ctrl + Z:执行...')
                })*/

            }).catch((err) => {
                this.error({
                    message: '初始化图片失败，请检查资源或资源地址是否设置跨域限制',
                    error: err,
                    url: this.background,
                    orgin: 'init -> urlToImageElement'
                });
                this.loading(false)
            })
        }else{
            this.initCanvas();
            this.initEvent();
            this.loading(false);
            this.$emit('start', `分辨率: ${this.canvas.width}x${this.canvas.height}`)
            this.imgDataOld = getImageData(this.canvas);
            if (this.$refs.canvasBox) {
                this.canvasBox = this.$refs.canvasBox;
                this.canvasBox.style.width = this.canvas.width + 'px'
                this.canvasBox.style.height = this.canvas.height + 'px';
            }
            if (this.$refs.vdView) {
                this.vdView = this.$refs.vdView
            }
            console.warn('背景不是一个图片，或者图片错误，将已颜色加载背景')
        }


    },
    canvasMousedown(e) {

    },
    canvasMouseup(e) {
    },
    canvasMouseout(e) {
    },
    canvasTouchstart(e) {
    },
    canvasTouchend(e) {
    },
    winMouseup() {
    },
    winMousemove(e) {
    },
    winTouchend(e) {
    },
    visibilitychange() {
    }
}
